<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权限编辑</title>
    <link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}">
    <style>
        body {
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="layui-form" th:object="${permission}">

    <!-- 隐藏的权限ID -->
    <input type="hidden" id="id" th:field="*{id}">

    <!-- 权限名称 -->
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">权限名称</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" id="menuName" th:field="*{menuName}" class="layui-input">
            </div>
        </div>
    </div>

    <!-- 菜单类型 -->
    <div class="layui-form-item">
        <input type="hidden" id="menuType" value="">
        <label class="layui-form-label">菜单类型</label>
        <div class="layui-input-block">
            <input type="radio" lay-filter="menuType-filter" name="menuType" value="M" class="layui-input" title="目录" th:checked="${permission.menuType == 'M'}">
            <input type="radio" lay-filter="menuType-filter" name="menuType" value="C" class="layui-input" title="菜单" th:checked="${permission.menuType == 'C'}">
            <input type="radio" lay-filter="menuType-filter" name="menuType" value="F" class="layui-input" title="按钮" th:checked="${permission.menuType == 'F'}">
        </div>
    </div>

    <!-- 父级菜单 -->
    <div class="layui-form-item" id="pIdFormItem" th:if="${permission.menuType != 'M'}">
        <label class="layui-form-label">父级菜单</label>
        <div class="layui-input-inline layui-input-wrap">
            <select id="pId" th:field="*{parentId}">
                <option value="">请选择</option>
                <!-- 动态填充的选项 -->
            </select>
        </div>
    </div>

    <!-- 请求地址 -->
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">请求地址</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" id="url" th:field="*{url}" class="layui-input" th:attr="disabled=${permission.menuType == 'M'}">
            </div>
        </div>
    </div>

    <!-- 权限标识 -->
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">权限标识</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" id="perms" th:field="*{perms}" class="layui-input" th:attr="disabled=${permission.menuType == 'M'}">
            </div>
        </div>
    </div>

</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/plugins/layui/layui.js}"></script>
<script>
    layui.use(function () {
        var form = layui.form;
        var $ = layui.$;

        // 监听菜单类型变化
        form.on('radio(menuType-filter)', function(data){
            var menuType = data.elem.value;

            // 根据菜单类型的不同显示或隐藏父级菜单项
            if (menuType == "M") {
                // 隐藏父级菜单项
                $("#pIdFormItem").hide();
            } else {
                // 显示父级菜单项
                $("#pIdFormItem").show();
                // 根据菜单类型动态加载父级菜单（这里使用了简单的伪代码来示范动态加载）
                if(menuType == "C") {
                    getListMenu("M"); // 加载目录类型的菜单
                } else if(menuType == "F") {
                    getListMenu("C"); // 加载菜单类型的菜单
                }
            }
            // 更新菜单类型的隐藏字段值
            $("#menuType").val(menuType);
        });

        // 动态获取菜单列表函数（根据实际需求修改）
        function getListMenu(menuType) {
            $.ajax({
                type: "get",
                url: "/permission/listMenu",  // 后端接口URL
                data: {
                    menuType: menuType  // 传递菜单类型
                },
                dataType: "json",
                success: function (data) {
                    if (data && data.length > 0) {
                        // 清空父级菜单下拉框内容
                        $("#pId").empty();
                        // 添加默认选项
                        $("#pId").append("<option value=''>请选择</option>");
                        // 填充菜单数据
                        for (let i = 0; i < data.length; i++) {
                            let menu = data[i];
                            $("#pId").append("<option value='" + menu.id + "'>" + menu.menuName + "</option>");
                        }
                        // 重新渲染下拉框
                        form.render('select');
                    } else {
                        // 如果没有菜单数据，给出提示
                        $("#pId").html("<option value=''>无可用菜单</option>");
                        form.render('select');
                    }
                },
                error: function() {
                    // 请求失败时的处理
                    $("#pId").html("<option value=''>菜单加载失败</option>");
                    form.render('select');
                }
            })
        }
    });
</script>

</body>
</html>
